HTML 표시 노트는 스크립트에서 활용하는 유형입니다. 관계 속성으로 연결된 코드 노트의 HTML을 화면에 표시합니다.

HTML 표시 노트 만들기

• HTML 언어의 코드 노트를 만들고 표시할 내용을 작성합니다. 예: <p>안녕하세요.</p>
• HTML 표시 노트를 만듭니다.
• renderNote 관계가 앞서 만든 HTML 코드 노트를 가리키도록 지정합니다.

동적 내용 표시하기

스크립트로 HTML의 일부를 바꾸면 동적 화면을 만들 수 있습니다. 현재 날짜와 시각을 표시하는 예제를 만들어 보겠습니다.

먼저 다음 내용의 HTML 코드 노트를 만드세요.

<h1>현재 날짜와 시각</h1>
현재 날짜와 시각: <span class="date"></span>

그 바로 아래에 프런트엔드 JavaScript 코드 노트를 만들고 다음 코드를 작성합니다.

const $dateEl = api.$container.find(".date");
$dateEl.text(new Date().toLocaleString("ko-KR"));

원하는 위치에 HTML 표시 노트를 만들고 ~renderNote 관계로 HTML 노트를 연결하세요. 열면 현재 날짜와 시각이 한국어 형식으로 표시됩니다. 예: 현재 날짜와 시각 — 현재 날짜와 시각: 2025. 4. 6. 오후 3:26:29

관련 예제

체중 기록은 기본 사용 예제에 포함되어 있습니다.